<template>
  <div>
    <div>
      <h2>功能1：数字模块</h2>
      <div>数字为：{{ count }}</div>
      <div>
        <el-button @click="addNumber">添加</el-button>
      </div>
    </div>
    <hr />
    <div>
      <h2>功能2：图片模块</h2>
      <div>
        图片为：
        <span v-for="item in dogList" :key="item">
          <img :src="item" alt="" style="height: 100px" />
        </span>
      </div>
      <div>
        <el-button @click="addDog">添加</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import useCount from '@views/hooks/dog/hooks/useCount.ts'
import useDog from '@views/hooks/dog/hooks/useDog.ts'

/**
 * 未使用hooks的写法：  各类数据和方法是混合在一起的。
 */
/*const count = ref(0)
const dogList = reactive([
  'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg',
])

const addNumber = () => {
  count.value++
}
const addDog = async ()=>{
  let res = await axios({
    url:'https://dog.ceo/api/breed/pembroke/images/random',
    method:'get',
  })
  console.log('接口返回res：',res);
  dogList.push(res.data.message)
}*/

/**
 * hooks的写法
 */
const { count, addNumber } = useCount()
const { dogList, addDog } = useDog()
</script>
<style scoped></style>
